<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css精灵技术，雪碧图技术。是常用的技术。 */
        /* 将多个小图标合并制作到一张图片上，使用background-position属性单独显示其中一个。 */
        /* css精灵技术的优点:可以减少HTTP请求数，加快网页显示速度。 */
        /* css精灵技术的缺点:不方便测量，后期改动麻烦。 */
        i.zjh{
            position:absolute;
            top:200;
            right:200px;
            width: 32px;
            height: 32px;
            border: 1px solid #000;
            background-image: url(sprites.png);
            /* background-position的值是图片位置的负数，表示往反方向拉 */
            background-position: 0 -980px;
        }

        ul {
            list-style: none;
        }
        ul li{
            position: relative;
            padding-left: 18px;
        }
        ul li i{
            position:absolute;
            top:7px;
            left:0;
            background-image: url(sprites.png);
            width: 14px;
            height: 8px;
            background-position: 0 -12px;
        }
    </style>
</head>
<body>
    <i class="zjh"></i>
    <ul>
        <li><i class="dg"></i>11111</li>
        <li><i class="dg"></i>222222</li>
        <li><i class="dg"></i>33333333</li>
        <li><i class="dg"></i>44444444</li>
    </ul>
</body>
</html>